<template>
	<div class="cooper-box" id="cooper-box">
		<div class="left left-img">
			<img src="../../assets/images/HK-img.png">
		</div>
		<div class="right right-text">
			<div class="sanjiao-box"></div>
			<h1 class="icon-hk-daxue"><img src="../../assets/images/HK-logo1.png" alt=""></h1>
			<div class="sub-box">
				香港理工大学是一所坐落于中国香港特别行政区的公立综合性研究型大学。
				香港理工大学成立于1937年，为香港历史最悠久的大学之一，
				是香港8所受政府大学教育资助委员会资助并可颁授学位的高等教育院校之一。
			</div>
			<div class="bootom-box">
				<h2 class="header-title">
					<span>香港理工大学</span>
				</h2>
			</div>
		</div>
	</div>
</template>
<style scoped="scoped">
	.cooper-box{
		width: 100%;
		height: 500px;
		position: relative;
	}
	.left-img{
		width: 65%;
		height: 100%;
	}
	.left-img img{
		width: 100%;
		height: 500px;
	}
	.right-text{
		width: 35%;
		height: 100%;
		position: relative;
		background-color: #FFFFFF;
	}
	.sanjiao-box {
		width: 0px;
		height: 0px;
		border-top: 30px solid transparent;
		border-right: 30px solid;
		border-bottom: 30px solid transparent;
		position: absolute;
		margin-left: -20px;
		margin-top: 30px;
		border-right-color: #FFFFFF;
	}
	.icon-hk-daxue{
		margin: 50px 0;
		margin-bottom: 0px;
	}
	.sub-box{
		width: 80%;
		margin: auto;
		font-size: 14px;
		line-height: 23px;
		text-indent: 2em;
	}
	.bootom-box{
		position: absolute;
		bottom: 0;
		width: 100%;
		left: 0;
		height: 134px;
		background-color: #434eea;
		background: -webkit-linear-gradient(left, #29a8f7, #434eea);
		background: -o-linear-gradient(right, #29a8f7, #434eea);
		background: -moz-linear-gradient(right, #29a8f7, #434eea);
		background: linear-gradient(to right, #29a8f7, #434eea);
		text-align: center;
		color: #FFFFFF;
	}
	.header-title{
		margin-top: 20px;
		font-size: 24px;
	}
	.header-title span{
		padding: 10px 0;
		border-bottom: 2px solid #f39800;
	}
	@media (max-width: 434px){
		.left-img{
			width: 100%;
			height: 60%;
		}
		.left-img img{
			width: 100%;
			height: 300px;
		}
		.right-text{
			width: 100%;
			height: 400px;
			position: relative;
		}
		.bootom-box{
			height: 50px;
		}
		.header-title{
			margin-top: 10px;
			font-size: 16px;
		}
	}
</style>